<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>模板</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 300px;
        --box-height: fit-content;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .demo {
        pointer-events: none;
        border: 1px dashed red;
      }
      .demo > div {
        pointer-events: auto;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./27-滚动条相关样式.html">上一篇</a>
      <a href="./29-拉伸resize.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>标题</dt>
        <dd>
          <h4>不要使用pointer-evets: none禁用按钮</h4>
          <p><i>原因</i></p>
          <p>一、无法禁用键盘事件</p>
          <p>二、影响无障碍访问</p>
          <p>所以，请使用原生的按钮disabled属性</p>
        </dd>
        <dd>
          <h4>继承性</h4>
          <div class="demo">
            <a href="javascript:;">禁用</a>
            <div>
              <a href="javascript:;">可以点</a>
            </div>
          </div>
        </dd>
        <dd>
          <h4>支持其他很多属性值</h4>
          <p>除了auto和none，其他都是针对SVG的</p>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
